<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // vue2和vue3 数据双向绑定的区别 https://juejin.cn/post/6964779204462247950#heading-29

    let person = {
      name: '张三',
      age: 19
    }

    // vue2
    // const p = Object.defineProperty(person, "name", {
    //   get: function() {
    //     return "《" + name + "》";
    //   },
    //   set: function(value) {
    //     // set里面要实现数据更新
    //     console.log(value, '1111111111');
    //     name = value; // 赋值
    //   }
    // })

    // vue3
    const p = new Proxy(person, {
      get: function(target,propName) {
        console.log("有人读取了propName属性", propName)
        // return target[propName]
        return Reflect.get(target,propName)
      },
      set: function(target,propName,value) {
        console.log("有人修改propName属性", propName,'新的值为value',value)
        // set里面要实现数据更新
        target[propName] = value;
        return Reflect.set(target,propName,value)
      },
      deleteProperty(target,propName) {
        // return delete target[propName]
        return Reflect.deleteProperty(target,propName)
      }
    })

    // try catch 捕获异常
    // try {

    // } catch(error) {
    //   console.log("error", error) 
    // }

    // window.Reflect

  </script>
  
</body>
</html>